import React, {Component} from 'react';
import { nanoid  } from "nanoid"
import "./index.css"

class Header extends Component {
  render() {
    return (
      <div className="todo-header">
        <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
      </div>
    );
  }

  handleKeyUp = (e) => {
    //  按下回车的事件
    // keyCode 按下按钮的按照代表的数字
    const { keyCode, target } = e;
    if (keyCode === 13 && target.value.trim() !== '') {
      //  回车事件
      const name = target.value;
      const newToDoObj = {
        id: nanoid(),
        name,
        done: false
      }
      this.props.AddToDoList(newToDoObj);
      target.value = "";
    }
  }
}

export default Header;